<template>
  <div class="">
    <div class="h1">
      表单控件
    </div>
    <div class="h2">
      select下拉选框
    </div>
    <div class="code_wrapper">
      <dk-select @select="select" :options="options" :placeholder="placehold"></dk-select>
      <pre class="language-html"><code class="language-html">
        &ltdk-select @select="select" :options="options" :placeholder="placeholder"&gt&lt/dk-select&gt
      </code><code class="language-js">
        export default {
          data(){
            return {
              options:[
                {item:'选项一', value:"1"},
                {item:'选项二', value:"2"},
                {item:'选项三', value:"3"},
                {item:'选项四', value:"4"},
                {item:'选项五', value:"5"},
                {item:'选项六', value:"6"},
                {item:'选项七', value:"7"}
              ],
              placeholder:'请选择',
              selectValue:''
            },
            methods:{
              select:function(value){
                this.selectValue = value;
                alert(this.selectValue);
              }
            }
          }
        }
      </code></pre>
    </div>
    <div class="h2">
      switch单选框
    </div>
    <div class="code_wrapper">
      <dk-slide-radio @radioClick="radioClick"></dk-slide-radio>
      <pre class="language-html"><code class="language-html">
        &ltdk-slide-radio @radioClick="radioClick"&gt&lt/dk-slide-radio&gt
      </code><code class="language-js">
        export default {
          data(){
            return {
              radioValue:""
            }
          },
          methods:{
            radioClick:function(value){
              this.radioValue = value;
              alert(this.radioValue);
            }
          }
        }
      </code></pre>
    </div>
    <div class="h1">
      checkbox
    </div>
    <div class="code_wrapper">
      <dk-checkbox :checks="check1"></dk-checkbox>
      <dk-checkbox :checks="check2"></dk-checkbox>
      <pre class="language-html"><code class="language-html">
        &ltdk-checkbox :checks="check1"&gt&lt/dk-checkbox&gt
        &ltdk-checkbox :checks="check2"&gt&lt/dk-checkbox&gt
      </code><code class="language-js">
        export default {
          data(){
            return {
              check1:{
                content:"选项一",
                value:"1",
                checked:true
              },
              check2:{
                content:"选项二",
                value:"2",
                checked:false
              }
            }
          }
        }
      </code></pre>
    </div>
    <div class="h2">
      checkbox参数说明
    </div>
    <div class="mention_wrapper">
      <dk-table :theads="theads" :tbodys="tbodys"></dk-table>
    </div>
    <div class="h1">
      rangeInput
    </div>
    <div class="code_wrapper">
      <div class="range_wrapper">
        <dk-range></dk-range>
      </div>
      <div class="range_wrapper">
        <dk-range :show-input="showInput" :range-number="rangeNumber"></dk-range>
      </div>
      <pre class="language-html"><code class="language-html">
        &ltdk-range&gt&lt/dk-range&gt
        &ltdk-range :show-input="showInput" :range-number="rangeNumber"&gt&lt/dk-range&gt
      </code><code class="language-js">
        export default {
          data(){
            return {
              showInput:"true",
              rangeNumber:10
            }
          }
        }
      </code></pre>
    </div>
    <div class="h2">
      rangeInput参数说明
    </div>
    <div class="mention_wrapper">
      <dk-table :theads="thead" :tbodys="tbody"></dk-table>
    </div>
    <div class="h1">
      radio
    </div>
    <div class="code_wrapper">
      <dk-radio :radios="radios" :checkIndex="checkIndex"></dk-radio>
      <pre class="language-html"><code class="language-html">
        &ltdk-radio :radios="radios" :checkIndex="checkIndex"&gt&lt/dk-radio&gt
      </code><code class="language-js">
        export default {
          data(){
            return {
              radios:[
                {
                  value:"1",
                  content:"选项一"
                },
                {
                  value:"2",
                  content:"选项二"
                },
                {
                  value:"3",
                  content:"选项三"
                }
              ],
              checkIndex:1
            }
          }
        }
      </code></pre>
    </div>
    <div class="h2">
      radio参数说明
    </div>
    <div class="mention_wrapper">
      <dk-table :theads="heads" :tbodys="bodys"></dk-table>
    </div>
    <div class="h1">
      input
    </div>
    <div class="code_wrapper">
      <dk-input @blur="blur" :placeholder="placeholder"></dk-input>
      <pre class="language-html"><code class="language-html">
        &ltdk-input :placeholder="placeholder"&gt&lt/dk-input&gt
      </code><code class="language-js">
        export default {
          data(){
            return {
              placeholder:"请输入"
            }
          },
          methods:{
            blur:function(){
              alert("监听到了子组件的方法");
            }
          }
        }
      </code></pre>
    </div>
    <div class="h2">
      input参数说明
    </div>
    <div class="mention_wrapper">
      <dk-table :theads="head" :tbodys="body"></dk-table>
    </div>
  </div>
</template>
<script type="text/javascript">
  import '../../../assert/css/form.css';
  import '../../../assert/css/style.css';
  export default {
    data(){
      return {
        options:[
          {item:'选项一', value:"1"},
          {item:'选项二', value:"2"},
          {item:'选项三', value:"3"},
          {item:'选项四', value:"4"},
          {item:'选项五', value:"5"},
          {item:'选项六', value:"6"},
          {item:'选项七', value:"7"}
        ],
        placehold:'请选择',
        selectValue:'',
        radioValue:'',
        check1:{
          content:"选项一",
          value:"1",
          checked:true
        },
        check2:{
          content:"选项二",
          value:"2",
          checked:false
        },
        theads:{
          val1:"参数",
          val2:"说明",
          val3:"类型",
          val4:"可选值",
          val5:"默认值"
        },
        tbodys:[
          {
            "参数":"content",
            "说明":"相当于label值",
            "类型":"string",
            "可选值":"---",
            "默认值":"---"
          },
          {
            "参数":"value",
            "说明":"checkbox的value值",
            "类型":"string",
            "可选值":"---",
            "默认值":"---"
          },
          {
            "参数":"checked",
            "说明":"是否选中",
            "类型":"Boolean",
            "可选值":"true or false",
            "默认值":"false"
          }
        ],
        thead:{
          val1:"参数",
          val2:"说明",
          val3:"类型",
          val4:"可选值",
          val5:"默认值"
        },
        tbody:[
          {
            "参数":"range-number",
            "说明":"一开始的value值",
            "类型":"Number",
            "可选值":"0-100",
            "默认值":"0"
          },
          {
            "参数":"show-input",
            "说明":"是否显示输入框",
            "类型":"Boolean",
            "可选值":"true or false",
            "默认值":"false"
          },
        ],
        showInput:"true",
        rangeNumber:10,
        radios:[
          {
            value:"1",
            content:"选项一"
          },
          {
            value:"2",
            content:"选项二"
          },
          {
            value:"3",
            content:"选项三"
          }
        ],
        checkIndex:1,
        heads:{
          val1:"参数",
          val2:"说明",
          val3:"类型",
          val4:"可选值",
          val5:"默认值"
        },
        bodys:[
          {
            "参数":"radio",
            "说明":"包含value和label的对象",
            "类型":"object",
            "可选值":"---",
            "默认值":"---"
          },
          {
            "参数":"checkInd",
            "说明":"表示第几个被选中",
            "类型":"Number",
            "可选值":"-1表示没有选中,小于等于radios的length",
            "默认值":"-1"
          }
        ],
        placeholder:"请输入",
        head:{
          val1:"参数",
          val2:"说明",
          val3:"类型",
          val4:"可选值",
          val5:"默认值"
        },
        body:[
          {
            "参数":"placeholder",
            "说明":"表单的提示",
            "类型":"String",
            "可选值":"",
            "默认值":""
          },
          {
            "参数":"blur函数",
            "说明":"用于监听input子组件失去焦点事件",
            "类型":"Func",
            "可选值":"可写可不写",
            "默认值":"---"
          },
        ],
      }
    },
    methods:{
      select:function(value){
        this.selectValue = value;
        alert(this.selectValue);
      },
      radioClick:function(value){
        this.radioValue = value;
        alert(this.radioValue);
      },
      blur:function(){
        alert("监听到了子组件的方法");
      }
    }
  }
</script>
